<template>
	<view class="page tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		<view class="top-bg"></view>
		<dawnBar title="订单信息"></dawnBar>
		<view class="page-container" style="padding-bottom: 140rpx;">
			<view v-if="orderInfo.id">

				<pCode v-if="showCode" @closeCodeBox="showCode = false" :patientId="orderInfo.patientId"
					:clinicNo="orderInfo.clinicNo"></pCode>

				<view class="tn-padding-sm dawn-shadow dawn-radius">
					<view class="tn-flex tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
						<view>
							<view class="tn-color-white">
								<text>订单金额</text>
							</view>
							<view class="tn-color-white tn-padding-top">
								<text style="margin-left: -6rpx;">￥</text>
								<text class="tn-text-bold"
									style="font-size: 55rpx;">{{ orderInfo.fee  || orderInfo.totalCost}}</text>
							</view>
						</view>
						<view>
							<view class="tn-color-white" style="text-align: end;">
								<view class="tn-padding-bottom-sm">
									<text class="tn-padding-right-xs"
										style="padding-left: 30rpx;opacity: 0.7;">姓名</text>
									{{ orderInfo.patientName }}
								</view>
								<view class="tn-padding-bottom-sm">
									<text class="tn-padding-right-xs" style="opacity: 0.7;">病人ID</text>
									{{ orderInfo.patientId }}
								</view>
								<view class="tn-padding-bottom-sm">
									<text class="tn-padding-right-xs" style="opacity: 0.7;">门诊号</text>
									{{ orderInfo.clinicNo }}
								</view>
							</view>
						</view>
						<view class="tn-bg-white dawn-shadow tn-padding-sm dawn-radius" @click="showCode = true">
							<view>
								<text style="font-size: 90rpx;"
									class="tn-icon-qr-beibei tn-color-dawn tn-margin-right-ss"></text>
							</view>
							<view class=" tn-text-center">
								<text class="dawn-text-sm">就诊码</text>
							</view>
						</view>
					</view>
					<view class="dawn-line tn-margin-top-sm"></view>
					<view
						class="tn-margin-top-sm tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
						<view class="justify-content-item tn-text-df tn-color-white">
							<text class="tn-icon-time-fill"></text>
							<text class="">{{ formatDateTime(orderInfo.payTime)  || '' }}</text>
						</view>
						<view
							class="tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right op-box">
							<view v-if="orderInfo.orderName === '门诊缴费'"
								class="tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right op-box">
								<tn-button @click="handleActionsheet" size="sm" class="dawn-btn-sm dawn-btn-sm__pay">
									<text class="tn-icon-image-text-fill">单据明细</text>
								</tn-button>
							</view>
						</view>
					</view>
				</view>

				<view class="list tn-margin-top-sm" v-if="orderInfo.orderName === '预约挂号'">
					<view class="tn-padding-sm dawn-shadow dawn-radius">
						<view class="list-head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
							<view class="tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
								<text
									class="dawn-text-md tn-text-bold tn-color-dawn">{{orderInfo.departmentName || '' }}</text>
								<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
								<text
									class="dawn-text-md tn-text-bold tn-color-dawn tn-padding-right-xs">{{orderInfo.doctorName || orderInfo.scheduleName }}</text>

							</view>
							<view>
								<view class="justify-content-item ">
									<tn-tag backgroundColor="tn-main-gradient-dawn" fontColor="#FFFFFF"
										shape="circleLeft" width="auto">
										{{ orderInfo.regType || ''}}
									</tn-tag>
								</view>
							</view>
						</view>
						<view class="list-content tn-flex tn-flex-col-center tn-flex-row-between">
							<view class="tn-flex tn-flex-col-center tn-flex-row-left">
								<view class="tn-flex tn-flex-col-center">
									<!-- <tn-avatar shape="square" :text="orderInfo.name" size="130rpx"></tn-avatar> -->
									<image mode="aspectFill" class="doctor-image"
										src="../../static/images/icon_yygh.png">
								</view>
								<view class="tn-padding-left-ss">
									<view class="">
										<tn-tag
											class="dawn-tag-sm dawn-tag-sm__2">号序：{{orderInfo.sequence || '' }}</tn-tag>
									</view>
									<view class="">
										<text class="dawn-text-sm tn-margin-right-ss">就诊日期</text>
										<text class="dawn-text-sm tn-text-bold">{{ orderInfo.regDate }}</text>
									</view>
									<view class="">
										<text class="dawn-text-sm tn-margin-right-ss">就诊时段</text>
										<text
											class="tn-color-red--dark tn-text-bold tn-padding-left-ss">{{ orderInfo.scheduleTime }}</text>
									</view>
								</view>
							</view>
							<view class="tn-flex tn-flex-nowrap  tn-flex-col-center tn-flex-row-left">
								<view class="justify-content-item tn-text-right">
									<text class="tn-icon-right tn-color-gray"></text>
								</view>
							</view>
						</view>
					</view>
				</view>


				<view class="dawn-shadow tn-padding dawn-radius tn-margin-top-sm">
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">缴费商户</view>
						</view>
						<view class="list__right list-text__right">
							{{appConfig.appTitle || '' }}
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">缴费业务</view>
						</view>
						<view class="list__right list-text__right">
							<tn-tag class="dawn-tag-sm dawn-tag-sm__4">{{ orderInfo.orderName  || '' }}</tn-tag>
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">订单号</view>
						</view>
						<view class="list__right list-text__right">
							{{ orderInfo.orderNumber  || orderInfo.registerNo }}
						</view>
					</view>
					<view class="list-text" v-if="orderInfo.idCardNo  || orderInfo.cardNo">
						<view class="list__left">
							<view class="list__left__text">身份证</view>
						</view>
						<view class="list__right list-text__right">
							{{ orderInfo.idCardNo  || orderInfo.cardNo }}
						</view>
					</view>
					<view class="list-text" v-if="orderInfo.eInvoice">
						<view class="list__left">
							<view class="list__left__text">电子发票</view>
						</view>
						<view class="list__right list-text__right">
							{{ orderInfo.eInvoice.eInvoiceNo}}
							<!-- <text class="tn-padding-left-ss tn-icon-send-fill dawn-color-dark"></text> -->
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">使用场景</view>
						</view>
						<view class="list__right list-text__right">
							{{ orderInfo.payScene }}
						</view>
					</view>

					<view v-if="orderInfo.chsOrder">
						<view class="list-text">
							<view class="list__left">
								<view class="list__left__text">支付方式</view>
							</view>
							<view class="list__right list-text__right">
								医保移动支付
							</view>
						</view>
					</view>
					<view v-else class="list-text">
						<view class="list__left">
							<view class="list__left__text">支付方式</view>
						</view>
						<view v-if="orderInfo.payModeName.indexOf('才登贝') !== -1" class="list__right list-text__right">
							微信支付
						</view>
						<view v-else class="list__right list-text__right">
							{{ orderInfo.payModeName }}
						</view>
					</view>

					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">支付状态</view>
						</view>
						<view class="list__right list-text__right">
							<tn-tag class="dawn-tag-sm" v-if="orderInfo.procedureStatus === 'success'">
								成功</tn-tag>
							<tn-tag v-else-if="orderInfo.procedureStatus === 'refund'"
								class="dawn-tag-sm dawn-tag-sm__2">
								已退号
							</tn-tag>
							<tn-tag v-else-if="orderInfo.procedureStatus === 'REFUND'"
								class="dawn-tag-sm dawn-tag-sm__2">
								已退款
							</tn-tag>
							<tn-tag class="dawn-tag-sm dawn-tag-sm__4" v-else>
								失败</tn-tag>
						</view>
					</view>

					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">总金额</view>
						</view>
						<view class="list__right list-text__right">
							<tn-tag class="dawn-tag-sm dawn-tag-sm__1">¥
								{{ orderInfo.fee  || orderInfo.totalCost  }}</tn-tag>
						</view>
					</view>

					<view v-if="orderInfo.chsOrder">
						<view class="list-text">
							<view class="list__left">
								<view class="list__left__text">统筹支付</view>
							</view>
							<view class="list__right list-text__right">
								<tn-tag class="dawn-tag-sm dawn-tag-sm__4">¥
									{{ fen2yuan(orderInfo.chsOrder.fundFee) }}</tn-tag>
							</view>
						</view>
						<view class="list-text">
							<view class="list__left">
								<view class="list__left__text">个账支付</view>
							</view>
							<view class="list__right list-text__right">
								<tn-tag class="dawn-tag-sm dawn-tag-sm__2">¥
									{{ fen2yuan(orderInfo.chsOrder.acctFee) }}</tn-tag>
								<!-- ¥ {{ fen2yuan(orderInfo.chsOrder.acctFee) }} -->
							</view>
						</view>
						<view class="list-text">
							<view class="list__left">
								<view class="list__left__text">自费支付</view>
							</view>
							<view class="list__right list-text__right">
								<tn-tag class="dawn-tag-sm dawn-tag-sm__3">¥
									{{ fen2yuan(orderInfo.chsOrder.cashFee) }}</tn-tag>
								<!-- ¥ {{ fen2yuan(orderInfo.chsOrder.cashFee) }} -->
							</view>
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">HIS挂号单</view>
						</view>
						<view class="list__right list-text__right" v-if="orderInfo.orderName === '门诊缴费'">
							{{ orderInfo.registerNo }}
						</view>
						<view class="list__right list-text__right" v-else>
							{{ orderInfo.procedureNo }}
						</view>
					</view>
					<view class="list-text" v-if="orderInfo.billNos">
						<view class="list__left">
							<view class="list__left__text tn-text-ellipsis">HIS单据号</view>
						</view>
						<view class="list__right list-text__right tn-text-ellipsis-2">
							<text class="tn-padding-left-sm tn-text-ellipsis-2">
								{{ orderInfo.billNos }}
							</text>
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">HIS结帐ID</view>
						</view>
						<view class="list__right list-text__right">
							{{ orderInfo.settleId  || orderInfo.procedureId }}
						</view>
					</view>
				</view>
				
				<view v-if="eInvoiceUrl !== ''" class="dawn-shadow tn-padding dawn-radius tn-margin-top-sm">
					<view class="" >
						<view class="tn-padding-xs">
							<view class="tn-flex tn-flex-row-center">
								<view class="tn-bg-white dawn-radius tn-padding-sm ">
									<image mode="aspectFill" style="width: 140px;height:140px" :src="eInvoiceUrl"/>
								</view>
							</view>
						</view>
						<view class="tn-flex tn-flex-row-center tn-flex-col-center">
							<view>
								<text class="tn-text-lg">电子票据获取码，长按识别</text>
							</view>
						</view>
					</view>
					
				</view>
				
				
				
			</view>
			<view v-if="show">
				<dawnMsg :box="dawnMsgBox" :msg="msg"></dawnMsg>
			</view>
			


			<view class="tn-flex tn-footerfixed">
				<view v-if="orderInfo.orderName === '预约挂号' && orderInfo.procedureStatus === 'success'"
					class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
					<tn-button @click="onRegisterCancel()" class="dawn-btn-lg dawn-btn-lg__danger">
						<text class="tn-icon-reduce-square-fill tn-padding-right-xs"></text>
						<text>退 号</text>
					</tn-button>
				</view>
				<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
					<tn-button @click="openLink('https://ynzykj.net/mlqzyyymyd/wx/questionnaire/info/myd?patientId='+patientInfo.id)" class="dawn-btn-lg dawn-btn-lg__main">
						<text class="tn-icon-message-fill tn-padding-right-xs"></text>
						<text>满意度调查</text>
					</tn-button>
				</view>
			</view>
		</view>

		<view class="actionsheet" v-show="actionsheetVisible">
			<view class="actionsheet-mask" @click="handleActionsheet"></view>
			<view class="actionsheet-panel">
				<view class="actionsheet-hd">
					<view class="actionsheet-hd-tt">单据明细</view>
					<i class="actionsheet-icon-close" @click="handleActionsheet"></i>
				</view>
				<view class="actionsheet-bd">
					<view class="actionsheet-box" v-for="item in prescriptionList" :key="item.id">
						<view class="actionsheet-box-hd">{{item.projectName}}</view>
						<view class="actionsheet-box-bd">
							<view class="actionsheet-box-item">
								<view class="actionsheet-box-item-label-wrap">
									<!-- <view class="actionsheet-box-item-label">{{item.projectName}}</view> -->
									<view class="actionsheet-box-item-sublabel"> {{item.price}} * {{item.entriesNum}}
										{{item.unit}}
									</view>
								</view>
								<view class="actionsheet-box-item-value em">
									¥ {{item.price * item.entriesNum}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- loading -->
		<dawnLoading :show="loading"></dawnLoading>

		<!-- 悬浮按钮-->
		<NavBtn></NavBtn>
	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import * as Util from '@/utils/util.js';
	import * as PayApi from "@/api/hospital/pay.js";
	import * as ChsApi from "@/api/hospital/chs.js";
	import * as RegisterApi from "@/api/hospital/register.js";
	import * as api from '@/api/api.js';
	import * as config from "@/api/config.js";

	import chs from "@/libs/chs.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	const app = getApp();

	export default {
		name: 'order',
		mixins: [page_mixin],
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo', 'patientInfo']),
		data() {
			return {
				iconSize: 38,
				size: 40,
				loading: false,
				showCode: false,
				show: false,
				msg: '',
				dawnMsgBox: '',
				success: 0,
				successTitle: '正在处理中，请稍候...',
				tabsIndex: 0,
				queryData: {
					pageSize: 10,
					pageNo: 1,
					patientId: '0',
					patientName: '0',
					orderNumber: '',
					queryType: 'DETAIL'
				},
				status: -1,
				orderInfo: {},
				eInvoice: {},
				eInvoiceUrl: '',
				prescriptionList: [],
				actionsheetVisible: false
			}
		},
		async onLoad(options) {
			await this.$onLaunched;
			console.info("order return options");
			console.table(options);
			if (!this.isLogin) {
				toLogin();
				return;
			} else {
				this.queryData.orderNumber = options.orderNumber;
				
				if(this.patientInfo){
					this.queryData.pid = this.patientInfo.id;
					this.queryData.userId = this.patientInfo.openid;
					this.queryData.patientId = this.patientInfo.patientId;
					this.queryData.patientName = this.patientInfo.name;
				}
				this.getOrderData();
			}
		},
		methods: {
			getOrderData: function() {
				let that = this;
				this.loading = true;
				this.show = false;
				this.dawnMsgBox = '';
				this.orderInfo = {};
				PayApi.orderQuery(this.queryData).then(res => {
					console.table(res);
					this.loading = false;
					if (res.code === 0) {
						that.orderInfo = res.data;
						that.eInvoice = res.data.eInvoice;
						
						
						if(that.eInvoice && that.eInvoice.eInvoiceUrl){
							that.eInvoiceUrl = 'data:image/png;base64,'+that.eInvoice.eInvoiceUrl;
						}

						if (that.orderInfo.orderName === '门诊缴费') {
							that.prescriptionList = res.data.prices;
							let orderNo = '';
							res.data.items.forEach(function(item) {
								orderNo += item.orderNo + ',';
							});
							if (orderNo != '') {
								orderNo = orderNo.substring(0, orderNo.length - 1);
							}
							that.orderInfo.billNos = orderNo;
						}

						if (res.data.procedureStatus && res.data.procedureStatus === 'success') {
							that.successTitle = '订单支付成功';
							that.success = 1;
						} else {
							that.success = 2;
							that.successTitle = '缴费失败、请联系管理员';
						}
					} else {
						that.show = true;
						that.msg = res.msg;
					}
				}).catch(err => {
					console.table(err);
					that.loading = false;
					that.show = true;
				})
			},
			onRegisterCancel() {
				let that = this;
				uni.showModal({
					title: '系统提示',
					content: '请确认是否要退号?',
					success: function(res) {
						if (res.confirm) {
							that.loading = true;
							that.show = false;
							that.dawnMsgBox = 'popup';
							const cancelData = new Object();
							cancelData.patientId = that.orderInfo.patientId;
							cancelData.patientName = that.orderInfo.patientName;
							cancelData.orderNumber = that.queryData.orderNumber;
							RegisterApi.regCancel(cancelData).then(res => {
								that.loading = false;
								console.table(res);
								if (res.code === 0) {
									that.$util.Tips({
										title: '退号操作成功'
									});
									that.getOrderData();
								} else {
									that.show = true;
									that.msg = res.msg;
								}
							}).catch(err => {
								that.loading = false;
								that.show = true;
								that.msg = err.message;
							})
						} else if (res.cancel) {
							// console.log('取消');
							//TODO
						}
					}
				});
			},
			onUnLockRegNum() {
				let that = this;
				uni.showModal({
					title: '系统提示',
					content: '请确认是否解锁号源?',
					success: function(res) {
						if (res.confirm) {
							that.loading = true;
							that.show = false;
							that.dawnMsgBox = 'popup';
							const cancelData = new Object();
							cancelData.patientId = that.orderInfo.patientId;
							cancelData.patientName = that.orderInfo.patientName;
							cancelData.orderNumber = that.queryData.orderNumber;
							RegisterApi.unLockRegNum(cancelData).then(res => {
								that.loading = false;
								console.table(res);
								if (res.code === 0) {
									that.$util.Tips({
										title: '解锁号源操作成功'
									});
									that.getOrderData();
								} else {
									that.show = true;
									that.msg = res.msg;
								}
							}).catch(err => {
								that.loading = false;
								that.show = true;
								that.msg = err.message;
							})
						} else if (res.cancel) {
							// console.log('取消');
							//TODO
						}
					}
				});
			},
			handleActionsheet() {
				this.actionsheetVisible = !this.actionsheetVisible;
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
			fen2yuan(price) {
				return Util.fen2yuan(price)
			},
			formatDateTime: function(date) {
				return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dawn-success {
		height: auto;
		z-index: 100;
		padding: 30rpx 0rpx 60rpx 0rpx;
	}

	.list-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0rpx !important;
		border-bottom: 1px solid $dawn-line-color;

		&__right {
			font-size: $dawn-font-size-md;
		}
	}

	.list-icon-text,
	.list-image-text {
		padding: 15rpx 20rpx;
		border-bottom: 1px solid $dawn-theme-color-light;
	}

	.list {
		font-size: 14px;

		&__left {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			&__icon,
			&__image {
				margin-right: 18rpx;
			}

			&__image {
				margin-right: 18rpx;
				width: 60rpx;
				height: 60rpx;
			}
		}

		&__right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}

	/* 卡 */
	.button-vip {
		width: 100%;
		height: 240rpx;
		border-radius: $dawn-border-radius;
		position: relative;
		z-index: 1;

		&::after {
			content: " ";
			position: absolute;
			z-index: -1;
			width: 100%;
			height: 100%;
			left: 0;
			bottom: 0;
			border-radius: inherit;
			opacity: 1;
			transform: scale(1, 1);
			background-size: 100% 100%;
		}
	}
</style>